<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card shadow="hover">
          <div slot="header" style="text-align: center">
            <span>填写通知</span>
          </div>
          <div
            style="display: flex; justify-content: center; margin-right: 10px"
          >
            <!--<span style="margin: auto 0">主题</span>-->
            <div style="margin: auto 0">
              <el-input v-model="addNotice.title" placeholder="主题"></el-input>
            </div>

            <div style="margin: auto 5px">
              <el-input
                type="textarea"
                v-model="addNotice.content"
                placeholder="内容"
                maxlength="100"
                show-word-limit
              ></el-input>
            </div>
            <!--<span style="margin: auto 0">班级</span>-->
            <div style="margin: auto 0">
              <el-select
                v-model="addNotice.class_idArr"
                multiple
                placeholder="班级（多选）"
              >
                <el-option
                  v-for="item in class_value"
                  :key="item.c_id"
                  :label="item.classes"
                  :value="item.c_id"
                >
                </el-option>
              </el-select>
            </div>
            <div style="margin: auto 0">
              <el-button type="primary" @click="noticeSend">发布</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-divider></el-divider>
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card v-if="show" shadow="hover">
          <div slot="header" class="clearfix" style="text-align: center">
            <span>通知详情查看</span>
            <el-button
              style="float: right; padding: 3px 0"
              type="text"
              @click="cls"
              >关闭</el-button
            >
          </div>
          <el-table :data="noticeDetails" border style="width: 100%">
            <el-table-column prop="n_id" label="序列号"> </el-table-column>
            <el-table-column prop="title" label="主题"> </el-table-column>
            <el-table-column label="通知的班级">
              <template v-for="item in classes_id">
                <ElTag type="success" :key="item.c_id">{{
                  item.classes
                }}</ElTag>
              </template>
            </el-table-column>
            <el-table-column label="发布时间">
              <template slot-scope="scope">{{
                scope.row.createtime | date
              }}</template>
            </el-table-column>
          </el-table>
          <el-row :gutter="20" style="margin-top: 10px">
            <el-col :span="8">
              <el-card style="height: 300px" shadow="hover">
                <ve-pie
                  :data="chartData"
                  :settings="Settings"
                  :legend-visible="false"
                >
                </ve-pie>
              </el-card>
            </el-col>
            <el-col :span="16">
              <el-card shadow="hover">
                <div slot="header" class="clearfix" style="text-align: center">
                  <span>访问的用户</span>
                </div>
                <el-row
                  :gutter="20"
                  style="overflow-y: scroll; height: 12.5rem"
                >
                  <el-col
                    :span="4"
                    v-for="(item, index) in users"
                    :key="index"
                    class="ca"
                    style="margin-bottom: 3rem; margin-top: 0.7rem"
                  >
                    <el-tooltip placement="top">
                      <div slot="content">
                        阅读时间：{{ item.readtime | date }}
                      </div>
                      <el-card
                        shadow="hover"
                        :body-style="{ padding: '0px' }"
                        style="min-height: 11rem"
                        class="imgcar"
                      >
                        <div style="width: 100%; height: 6rem">
                          <img
                            :src="imgPath"
                            style="width: 100%; height: 100%; object-fit: cover"
                          />
                        </div>
                        <div
                          style="
                            margin-top: 0.8rem;
                            padding-left: 0.8rem;
                            padding-right: 0.8rem;
                            margin-bottom: 1rem;
                            height: 3rem;
                            margin-bottom: 5px;
                            overflow-y: scroll;
                          "
                        >
                          <span>{{ item.username }}</span>
                          <div
                            class="bottom clearfix"
                            style="height: 1rem; overflow: hidden"
                          >
                            <time class="time">{{ item.class_id }}</time>
                          </div>
                        </div>
                      </el-card>
                    </el-tooltip>
                  </el-col>
                </el-row>
              </el-card>
            </el-col>
          </el-row>
        </el-card>

        <el-card v-else shadow="hover">
          <el-table
            :data="tableData"
            border
            :default-sort="{ prop: 'n_id', order: 'descending' }"
            style="width: 100%"
          >
            <el-table-column prop="n_id" sortable label="序列号">
            </el-table-column>
            <el-table-column prop="title" label="主题"> </el-table-column>
            <el-table-column label="创建时间">
              <template slot-scope="scope">{{
                scope.row.createtime | date
              }}</template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  style="padding: 3px 0"
                  type="text"
                  @click="open(scope.$index, scope.row)"
                  >删除</el-button
                >
                <el-button
                  style="padding: 3px 0"
                  type="text"
                  @click="selectshow(scope.$index, scope.row)"
                  >查看详情</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <div class="block" style="text-align: center; margin-top: 20px">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="paginations.page_index"
              :page-sizes="paginations.page_sizes"
              :page-size="paginations.page_size"
              :layout="paginations.layout"
              :total="paginations.total"
            >
            </el-pagination>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import dayjs from 'dayjs';
export default {
  data () {
    return {
      Settings: {
        offsetY: 120,
        radius: 50,
        // level: [],
        itemStyle: {
          center: ['20%', '10%']
        },
        label: {
          normal: {
            fontSize: 16,
            formatter: '{b}' + '\n\r' + '{c}' + '\n\r' + '({d}%)'
          }
        }
      },
      imgPath: "http://127.0.0.1:3000/file/1.jpg",
      show: false,
      addNotice: {
        title: '',
        content: '',
        class_idArr: '',
        class_id: ''
      },
      classes_id: [],
      tableData: [],
      noticeDetails: [],
      paginations: {
        page_index: 1,   //当前位于哪页
        total: 0,        //总数
        page_size: 5,    //一页显示多少条
        page_sizes: [5, 10, 15, 20],    //每页显示多少条
        layout: "total, sizes, prev, pager, next, jumper"    //翻页属性
      },

      class_value: [],
      users: [],
      readtime: [],
      chartData: {
        columns: ['类型', '用户'],
        rows: []
      }
    }
  },


  created () {
    /**
     * 调用获取所有通知
     */
    this.getvalue()
    this.getClass()


  },
  filters: {
    date (time) {
      return dayjs(time).format('YYYY-MM-DD HH:mm')
    }
  },
  methods: {

    /* 获取所有通知 */
    async getvalue () {
      const { data: result } = await this.$Axios.get('admin/getAllNotice')
      this.filterTable = result.data
      this.allTableDate = result.data
      this.setPaginations()

    },
    /* 获取所有班级 */
    async getClass () {
      const { data: result } = await this.$Axios.get('admin/getClass')
      this.class_value = result
    },

    /**
    * 发布通知
   
    */
    async noticeSend () {
      if (this.addNotice.class_idArr.length == 0 || !this.addNotice.title) {
        this.open3("输入不可为空,请输入内容再发布")
      } else {
        this.addNotice.class_id = this.addNotice.class_idArr.join(";")
        const { data: result } = await this.$Axios.post('admin/announce', this.addNotice)
        console.log(result)
        if (result.code == 200) {
          this.addNotice.title = ""
          this.addNotice.class_idArr = ""
          this.open2(result.msg)
          this.getvalue()
          return
        }
      }

    },

    /* 删除通知)*/
    async delNotice (index, row) {
      const { data: result } = await this.$Axios.get('admin/delNotice', {
        params: {
          n_id: row.n_id,
        }
      })
      return result

    },
    //关闭
    cls () {
      let arr = [];
      this.chartData.rows = arr
      this.show = false;
    },
    //设置分页数据
    setPaginations () {
      this.paginations.total = this.filterTable.length
      this.handleCurrentChange(this.paginations.page_index)
    },
    //当每页数据条数发生改变时触发
    handleSizeChange (page_size) {
      this.paginations.page_size = page_size
      this.setPaginations()

    },
    handleCurrentChange (page) {
      this.paginations.page_index = page
      //获取当前页
      let index = this.paginations.page_size * (page - 1)
      //数据的总数
      let nums = this.paginations.page_size * page

      let table = []
      for (let i = index; i < nums; i++) {
        if (this.filterTable[i]) {
          table.push(this.filterTable[i])
        }
      }
      this.tableData = table
    },

    //清空搜索框内容并重新加载数据
    clear_search () {
      this.tableData = this.filterTable = this.allTableDate
      this.paginations.total = this.tableData.length
      this.tableData = this.allTableDate.filter((item, index) => {
        return index < this.paginations.page_size
      })
    },


    open2 (message) {
      this.$message({
        message: message || '恭喜你，这是一条成功消息',
        type: 'success'
      });
    },
    open3 (v) {
      this.$message({
        message: v,
        type: 'warning'
      });
    },
    open (index, row) {
      this.$confirm('此操作将继续, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const result = await this.delNotice(index, row);
        if (result.code == 200) {
          this.$message.success('删除成功')
          this.getvalue()

        } else {
          this.$message.error('删除失败')
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    /**
     * 查看通知详情(增值功能)
     n_id:row.n_id,
     * */
    async selectshow (index, row) {

      const { data: result } = await this.$Axios.get('admin/NoticeDetails', {
        params: {
          n_id: row.n_id,
        }
      })
      this.noticeDetails = result.data
      this.classes_id = result.class_id
      this.users = result.readUser;
      this.readtime = result.readUser.readtime
      this.chartData.rows.push(
        { '类型': '已读', '用户': result.readNum },
        { '类型': '未读', '用户': result.total - result.readNum },
      )
      this.show = !this.show;

      let arr = []
      for (let i = 0; i < this.classes_id.length; i++) {
        for (let j = 0; j < this.class_value.length; j++) {
          if (this.classes_id[i].class_id == this.class_value[j].c_id) {
            arr.push(this.class_value[j])
          }
        }
      }
      this.classes_id = arr 
    },





  },
}
</script>

<style scoped lang="scss">
::-webkit-scrollbar {
  display: none;
}
/* .ca{
         height:15rem ;
     }*/
.imgcar {
  min-height: 11rem;
  display: flex;
  flex-flow: column;
  align-items: center;
  /*margin-top: 2rem;*/
}
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 40px;
  height: 40px;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}

.clearfix:after {
  clear: both;
}
</style>